<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link rel="stylesheet" href="../../css/Semantic/semantic.min.css"/>
		<link rel="stylesheet" href="../../css/login.css" />
		<link rel="stylesheet" href="../../layui/css/layui.css" />
		<script type="text/javascript" src="../../js/jquery.min.js"></script>
		<script type="text/javascript" src="../../layui/layui.js"></script>
		<script src="../../js/vue/axios.min.js"></script>
		<script src="../../js/vue/vue.js"></script>
		<title>登录页面</title>
	</head>

	<body>
		<div id="app">
		<div>
			<button type="button" id="ClickMe">点击登录</button>
		</div>

		<div id="goodcover"></div>

		<div id="code">
			<div class="close1"><a href="javascript:void(0)" id="closebt"><img src="https://www.17sucai.com/preview/586510/2016-07-24/jQuery-tcc/images/close.gif"></a></div>
			<div class="goodtxt">
					<span class="login100-form-title">
									后台管理
								</span>
				
								<div class="wrap-input100 validate-input">
									<input class="input100" type="text" name="username" v-model="username"  placeholder="账号" autocomplete="off">
									<span class="focus-input100"></span>
									<span class="symbol-input100">
										<i class="user icon" style="font-size: 20px;"></i>
									</span>
								</div>
				
								<div class="wrap-input100 validate-input">
									<input class="input100" type="password" v-model="password" name="password" placeholder="密码">
									<span class="focus-input100"></span>	
									<span class="symbol-input100">
										<i class="lock icon"  style="font-size: 20px;"></i>
									</span>
								</div>
								
								<div class="container-login100-form-btn">
									<button class="login100-form-btn" @click="submit">
										登陆
									</button>
								</div>
				
								<div class="text-center p-t-12">
									<a class="txt2" href="javascript:">
										忘记密码？
									</a>
								</div>
				
								<div class="text-center p-t-136">
									<a class="txt2" href="#">
											还没有账号？立即注册
										<i class="fa fa-long-arrow-right m-l-5" aria-hidden="true"></i>
									</a>
								</div>
			</div>
		</div>
		</div>
		<!-- 逻辑-->
		<script>
			
			new Vue({
				el:'#app',
				data(){
					return{
						username:'lisi',
						password:'123456'
					}
				},
				mounted:function(){
					
					
				},
				methods:{
					submit:function(){
						var params=new URLSearchParams();
						params.append('username',this.username);
						params.append('password',this.password);
						axios.post('/account/findByUsernameAndPassword',params).then(res=>{
							console.log(res);
							var o=res.data;
							if(o==0){
								location.href="../after/index.html";
							}else if(o==1){
								location.href="../front/student/index.html";
							}else{
								layer.msg('账号或密码错误');
							}
						},err=>{
							console.log(err);
						})
					}
				}
			});
			
			layui.use(['form', 'layedit', 'laydate','upload','jquery'], function(){
				  var form = layui.form
				  ,layer = layui.layer
				  ,layedit = layui.layedit
				  ,laydate = layui.laydate
				  ,upload = layui.upload
				  ,$=layui.jquery;
				  
			});
			
		</script>
		<!-- 页面效果 -->
		<script>
			$(function() {
				//alert($(window).height());
				$('#ClickMe').click(function() {
					$('#code').center();
					$('#goodcover').show();
					$('#code').fadeIn();
				});
				$('#closebt').click(function() {
					$('#code').hide();
					$('#goodcover').hide();
				});
				$('#goodcover').click(function() {
					$('#code').hide();
					$('#goodcover').hide();
				});
				/*var val=$(window).height();
	var codeheight=$("#code").height();
    var topheight=(val-codeheight)/2;
	$('#code').css('top',topheight);*/
				jQuery.fn.center = function(loaded) {
					var obj = this;
					body_width = parseInt($(window).width());
					body_height = parseInt($(window).height());
					block_width = parseInt(obj.width());
					block_height = parseInt(obj.height());

					left_position = parseInt((body_width / 2) - (block_width / 2) + $(window).scrollLeft());
					if (body_width < block_width) {
						left_position = 0 + $(window).scrollLeft();
					};

					top_position = parseInt((body_height / 2) - (block_height / 2) + $(window).scrollTop());
					if (body_height < block_height) {
						top_position = 0 + $(window).scrollTop();
					};

					if (!loaded) {

						obj.css({
							'position': 'absolute'
						});
						obj.css({
							'top': ($(window).height() - $('#code').height()) * 0.5,
							'left': left_position
						});
						$(window).bind('resize', function() {
							obj.center(!loaded);
						});
						$(window).bind('scroll', function() {
							obj.center(!loaded);
						});

					} else {
						obj.stop();
						obj.css({
							'position': 'absolute'
						});
						obj.animate({
							'top': top_position
						}, 200, 'linear');
					}
				}

			})
		</script>

	</body>
</html>
